html, body {
  height: 100%;
  background: #f8f8f9;
}
a:hover{
  text-decoration: none;
}
@mixin fz($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

@mixin height($height) {
  height: $height;
  [data-dpr="2"] & {
    height: $height * 2.6;
  }
  [data-dpr="3"] & {
    height: $height * 3;
  }
}
@mixin dpr-img($url,$name,$type:".jpg"){
    background-image: url($url+"2x/"+ $name+"@2x"+$type);
    [data-dpr="3"] &{
       background-image: url($url+"3x/"+ $name+"@3x"+$type);
    }
}



@mixin table-center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

@mixin poa-center($w, $h) {
    position: absolute;
    width: $w;
    height: $h;
    left: 50%;
    top: 50%;
    // margin-left:-($w/2);
    // margin-top:-($h/2);
    transition: translate(-50%, -50%)
}

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin flex-left {
  display: flex;
  justify-content: left;
  align-items: left;
}

@mixin clearfix {
  display: block;
  ::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
}

@mixin t-overflow($line:1) {
    @if $line==1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@function torem($px) {
    @return $px / 75px * 1rem;
}


$mainColor:#77b59c;




